<template>
  <div>
    <div style="width: 80%;margin-left: 110px;margin-top: 40px">
      <el-descriptions title="基本信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="用户名">{{userData.accountName}}</el-descriptions-item>
        <el-descriptions-item label="卡号">{{userData.accountCardNumber}}</el-descriptions-item>
        <el-descriptions-item label="手机号" :span="2">{{userData.accountPhone}}</el-descriptions-item>
        <el-descriptions-item label="卡上余额">
          {{userData.cardBalance}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="width: 80%;margin-left: 110px;margin-top: 40px">
      <b>充值记录</b>
    </div>
    <div style="width: 56%;margin-left: 110px;margin-top: 40px">
      <el-table
        border
        :data="rechargeData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="rechargeNum"
          label="订单号"
          width="250">
        </el-table-column>
        <el-table-column
          prop="rechargeMoney"
          label="充值金额"
          width="150">
        </el-table-column>
        <el-table-column
          prop="status"
          label="支付状态"
          width="200">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==1">已支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        width="140">
          <template slot-scope="scope">
            <el-button type="text" @click="details(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

      <div class="block" style="margin-left: 110px;margin-top: 40px">
        <el-pagination

          @current-change="handleCurrentChange"

          background

          layout=" prev, pager, next"

          :total="total">
        </el-pagination>
    </div>
  </div>

</template>
<script>
import request from "@/utils/request";
export default {
  name:"Rechargesuccess",

  created() {
    request.get('/ylsystem/frountaccount/'+sessionStorage.getItem("useId"))
      // 支付宝支付
      .then(res=> {
        this.userData=res.data
      });
    request.get('/pay/RechargRecoding/'+sessionStorage.getItem("useId")+"/"+this.currentPage)
      // 支付宝支付
      .then(res=> {
        this.total=res.data.total;
        this.rechargeData = res.data.list;
      });
  },

  data() {
    return {

      userData:{
        accountName:'',
        accountPhone:"",
        accountCardNumber:"",
        cardBalance:"",
        accountId:""
      },
      rechargeData: "",
      total:"",
      currentPage:1
    }
  },
  methods:{
    details(row){
      console.log(row)
    },

    handleCurrentChange(val) {
      console.log(val)
      this.currentPage=val;
      request.get('/pay/RechargRecoding/'+sessionStorage.getItem("useId")+"/"+this.currentPage)
        // 支付宝支付
        .then(res=> {
          this.total=res.data.total;
          this.rechargeData = res.data.list;
        });
    }
  },

}


</script>
